import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
import { useCallback, useEffect, useRef, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
import currencyFormat from "@/core/utils/currencyFormat";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
import { SkeletonList } from "@/components/elements/Skeleton";
import Link from "@/components/elements/Link";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import Alert from "@/components/elements/Alert";
import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
import { toast } from "react-hot-toast";
import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
import getFileBase64 from "@/core/utils/getFileBase64";
import VariantGroupCard from "@/components/variants/VariantGroupCard";

export default function DetailTransaction() {
  const router = useRouter();
  const { id } = router.query;
  const [ auth ] = useAuth();
  const [ transaction, setTransaction ] = useState(null);

  const loadTransaction = useCallback(async () => {
    if (auth && id) {
      const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
      setTransaction(dataTransaction);
    }
  }, [ auth, id ]);

  useEffect(() => {
    loadTransaction();
  }, [ loadTransaction ]);

  const submitCancelTransaction = async (data) => {
    const isCancelled = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/cancel`);
    if (isCancelled) {
      toast.success('Berhasil batalkan transaksi');
      loadTransaction();
    }
  }

  const {
    openConfirmAlert,
    ConfirmAlert
  } = useConfirmAlert({
    title: 'Batalkan Transaksi',
    caption: 'Apakah anda yakin untuk membatalkan transaksi?',
    closeText: 'Tidak',
    submitText: 'Iya, batalkan',
    onSubmit: submitCancelTransaction
  });

  const UploadPurchaseOrder = () => {
    const nameRef = useRef('');
    const fileRef = useRef('');

    const submitUploadPurchaseOrder = async (e) => {
      e.preventDefault();
      const file = fileRef.current.files[0];
      const name = nameRef.current.value;
      if (file.size > 5000000) {
        toast.error('Maksimal ukuran file adalah 5MB', {
          position: 'bottom-center'
        });
        return;
      }
      const parameter = {
        name,
        file: await getFileBase64(file)
      };
      const isUploaded = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${transaction.id}/upload_po`, parameter);
      if (isUploaded) {
        toast.success('Berhasil upload PO');
        loadTransaction();
        closePopup();
      }
    };

    return (
      <form className="flex flex-col gap-y-4" onSubmit={submitUploadPurchaseOrder}>
        <div>
          <label className="form-label mb-2">Nama PO</label>
          <input className="form-input" type="text" ref={nameRef} required />
        </div>
        <div>
          <label className="form-label mb-2">Dokumen PO</label>
          <input className="form-input" type="file" ref={fileRef} required />
        </div>
        <button type="submit" className="btn-yellow w-full mt-2">Upload</button>
      </form>
    );
  }

  const {
    closePopup,
    BottomPopup,
    openPopup
  } = useBottomPopup({
    title: 'Upload PO',
    children: UploadPurchaseOrder
  });

  const downloadPurchaseOrder = () => {
    const url = `${process.env.ODOO_HOST}/api/v1/partner/${auth.partner_id}/sale_order/${transaction.id}/download_po/${transaction.token}`;
    window.open(url, 'download')
  };

  const downloadQuotation = () => {
    const url = `${process.env.ODOO_HOST}/api/v1/partner/${auth.partner_id}/sale_order/${transaction.id}/download/${transaction.token}`;
    window.open(url, 'download')
  };

  const checkout = async () => {
    if (!transaction.purchase_order_file) {
      toast.error('Mohon upload dokumen PO anda sebelum melanjutkan pesanan')
      return
    }
    await apiOdoo('POST', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}/checkout`)
    toast.success('Berhasil melanjutkan pesanan')
    loadTransaction()
  }

  return (
    <WithAuth>
      <Layout className="pb-4">
        <AppBar title="Detail Transaksi" />
        
        { transaction ? (
          <>
            <div className="p-4 flex flex-col gap-y-4">
              <DescriptionRow label="Status Transaksi">
                <div className="flex justify-end">
                  <TransactionStatusBadge status={transaction?.status} />
                </div>
              </DescriptionRow>
              <DescriptionRow label="No Transaksi">
                { transaction?.name }
              </DescriptionRow>
              <DescriptionRow label="Ketentuan Pembayaran">
                { transaction?.payment_term }
              </DescriptionRow>
              <DescriptionRow label="Nama Sales">
                { transaction?.sales }
              </DescriptionRow>
              <DescriptionRow label="Waktu Transaksi">
                { transaction?.date_order }
              </DescriptionRow>
            </div>

            <LineDivider />

            <div className="p-4 flex flex-col gap-y-4">
              <DescriptionRow label="Purchase Order">
                { transaction?.purchase_order_name || '-' }
              </DescriptionRow>
              <div className="flex items-center">
                <p className="text-gray_r-11 leading-none">Dokumen PO</p>
                <button 
                  type="button"
                  className="btn-light py-1.5 px-3 ml-auto"
                  onClick={transaction?.purchase_order_file ? downloadPurchaseOrder : openPopup}
                >
                  { transaction?.purchase_order_file ? 'Download' : 'Upload' }
                </button>
              </div>
            </div>

            <LineDivider />

            <p className="h2 p-4">Detail Produk</p>

            <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
              <VariantGroupCard 
                variants={transaction?.products} 
                buyMore 
              />
              <div className="flex justify-between mt-3 font-medium">
                <p>Total Belanja</p>
                <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
              </div>
            </div>

            <LineDivider />

            <TransactionDetailAddress transaction={transaction} />

            <LineDivider />

            <div className="p-4">
              <p className="h2">Invoice</p>
              <div className="flex flex-col gap-y-3 mt-4">
                { transaction?.invoices?.map((invoice, index) => (
                  <Link href={`/my/invoice/${invoice.id}`} key={index}>
                    <div className="shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between">
                      <div>
                        <p className="mb-2">{ invoice?.name }</p>
                        <div className="flex items-center gap-x-1">
                          { invoice.amount_residual > 0 ? (
                            <div className="badge-red">Belum Lunas</div>
                            ) : (
                            <div className="badge-green">Lunas</div>
                          ) }
                          <p className="text-caption-2 text-gray_r-11">
                            { currencyFormat(invoice.amount_total) }
                          </p>
                        </div>
                      </div>
                      <ChevronRightIcon className="w-5 stroke-2" />
                    </div>
                  </Link>
                )) }
                { transaction?.invoices?.length === 0 && (
                  <Alert type='info' className='text-center'>
                    Belum ada Invoice
                  </Alert>
                ) }
              </div>
            </div>

            <LineDivider />
            
            <div className="px-4">
              { transaction?.status == 'draft' && (
                <button 
                  className="btn-yellow w-full mt-4" 
                  onClick={checkout}
                >
                  Lanjutkan Transaksi
                </button>
              ) }
              <button 
                className="btn-light w-full mt-4" 
                disabled={transaction?.status != 'draft'}
                onClick={downloadQuotation}
              >
                Download Quotation
              </button>
              { transaction?.status != 'draft' && (
                <button 
                  className="btn-light w-full mt-4" 
                  disabled={transaction?.status != 'waiting'}
                  onClick={() => openConfirmAlert(transaction)}
                >
                  Batalkan Transaksi
                </button>
              ) }
            </div>
          </>
        ) : (
          <div className="p-4 py-6">
            <SkeletonList number={12} />
          </div>
        ) }
        { ConfirmAlert }
        { BottomPopup }
      </Layout>
    </WithAuth>
  );
}